<template>
  <div class="speed-bar">
    <div class="table-wrap" v-if="props.data.columns && props.data.dataSource">
      <table class="speed-table">
        <thead>
          <tr>
            <th v-for="col in props.data.columns" :key="col.prop">{{ col.label }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, idx) in props.data.dataSource" :key="idx">
            <td v-for="col in props.data.columns" :key="col.prop">{{ row[col.prop] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer
])

const props = defineProps<{
  data: {
    y: string[],
    series: { name: string, data: number[], color?: string }[]
  },
  title?: string
}>()

const chartRef = ref<HTMLDivElement | null>(null)
let chartInstance: echarts.ECharts | null = null

const renderChart = () => {
  if (!chartRef.value) return
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
  }
    // 安全处理
  const y = props.data?.y || []
  const series = props.data?.series || []
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: props.title || '',
      left: 'center',
      top: 10,
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: '#2196f3',
      textStyle: { color: '#fff' }
    },
    legend: {
      top: 40,
      textStyle: { color: '#b0c9e0' }
    },
    grid: {
      left: '9%',
      right: '6%',
      top: 10,
      bottom: 24
    },
    xAxis: {
      type: 'value',
      min: 0,
      max: 10,
      axisLine: { lineStyle: { color: '#4e6e8e' } },
      splitLine: { lineStyle: { color: '#23344a' } },
      axisLabel: { color: '#b0c9e0', fontSize: 12 },
      interval: 2
    },
    yAxis: {
      type: 'category',
      data: y,
      axisLine: { lineStyle: { color: '#4e6e8e' } },
      axisLabel: { color: '#b0c9e0', fontSize: 12, fontWeight: 'bold',show:true }
    },
    series: series.map(s => ({
      type: 'bar',
      data: s.data,
      barWidth: 15,
      showBackground: true,
      backgroundStyle: {
        color: '#23344a'
      },
      itemStyle: {
        color: s.color || '#00eaff'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#00eaff'
        }
      }
    }))
  }
  chartInstance.setOption(option)
}

onMounted(() => {
  nextTick(renderChart)
})

watch(() => props.data, renderChart, { deep: true })
</script>

<style scoped>
.speed-bar {
  width: 100%;
  height: 220px;
  background: #14233c;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}
.table-wrap {
  width: 100%;
  margin-bottom: 8px;
}
.speed-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: #b0c9e0;
  font-size: 14px;
}
.speed-table th, .speed-table td {
  border-bottom: 1px solid #23344a;
  padding: 4px 8px;
  text-align: center;
}
.speed-table th {
  color: #fff;
  font-weight: 500;
  background: #19325a;
}
.speed-table tr:last-child td {
  border-bottom: none;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>
